import React, {Fragment} from 'react';
import {connect} from 'dva'
import {Page,Loader} from 'components'
import PageHeaderLayout from 'components/Layout/PageHeaderLayout'
import {Switch,Modal,Button,message} from 'antd'
import LwjTable from 'components/LwjTable/LwjTable'
import style from './index.less'
import GradesModal from './gradesModal.js'
import PrivilegesModal from './privilegesModal.js'

const Grades = ({location, dispatch, grades, loading}) => {

  const {
    list,
    copyList,
    enabled,
    gradesModalVisible,
    privilegesModalVisible,
    privileges,
    item
  } = grades;

  // 面包屑
  const breadcrumbList = [
    {
      title: '会员设置',
    }, {
      title: '等级设置',
      href: '/member/grades'
    }
  ];

  // 列表相关
  const listProps = {
    dataSource: list,
    loading: loading.effects['cartList/query'],
    pageChangeAction: 'cartList/query',
    dispatch,
    location,
    locale:{
      emptyText:"暂无数据"
    }
  }
  
  const productsColumns = [
    {
      title: '等级名称',
      dataIndex: 'name',
      key: 'name'
    }, {
      title: '积分范围',
      dataIndex: 'score',
      key: 'score',
      render: (text, record, index) => (
        <div>
          {record.minScore} - {record.maxScore ? record.maxScore : '以上'}
        </div>
      )
    }, {
      title: '操作',
      dataIndex: 'handleType',
      key: 'handleType',
      render: (text, record, index) => (
        <span>
          <a onClick={() => showPrivilegesModal(record)}>特权设置</a>
        </span>
      )
    }
  ]

  const toggle = (e) => {
    if(e && (list.length == 0)){
      Modal.confirm({
        title: '未配置等级与积分规则',
        content: '要启用该功能，必须先添加等级与积分规则你还要继续吗？',
        okText: '继续',
        onOk() {
          showGradesModal();
        },
        onCancel() {
          console.log('Cancel');
        },
      });
      return;
    }
    dispatch({
      type: 'grades/toggle',
      enabled: e
    })
  }

  const showGradesModal = () => {
    dispatch({
      type: 'grades/query',
      isModal: true
    })
  }

  const showPrivilegesModal = (record) => {
    if(enabled){
      message.warning("请禁用等级设置之后再编辑特权")
      return
    }
    dispatch({
      type: 'grades/queryLevelPrivileges',
      item: record
    })
    dispatch({
      type: 'grades/togglePrivilegesModalVisible',
      privilegesModalVisible: true
    })
  }

  return (
    <PageHeaderLayout title="等级设置" breadcrumbList={breadcrumbList}>
      <Page inner>
        <p>启用会员等级: <Switch checkedChildren="开启" unCheckedChildren="禁用" checked={enabled} onClick={toggle}/></p>
        <p><Button type="primary" onClick={showGradesModal}>设置等级积分</Button></p>
        <LwjTable {...listProps} columns={productsColumns} pagination={false}/>
      </Page>
      {gradesModalVisible ? <GradesModal visible={gradesModalVisible} list={copyList} loading={loading} dispatch={dispatch} /> : null}
      {privilegesModalVisible ? <PrivilegesModal visible={privilegesModalVisible} item={item} privileges={privileges} loading={loading} dispatch={dispatch} /> : null}
      <Loader spinning={loading.effects['grades/query']} />
      <Loader spinning={loading.effects['grades/toggle']} />
    </PageHeaderLayout>
  )
};

export default connect(({grades, loading}) => ({grades, loading}))(Grades)
